<template>
  <div class="goods_new">
    <van-nav-bar title="新闻资讯" left-arrow @click-left="goback"/>
    <div class="art">
      <p class="title">{{ data.title }}</p>
      <hr>
      <p class="subtitle">
        时间：{{ data.addTime }}
      </p>
      <div class="content" v-html="data.content"></div>
    </div>
    <van-loading v-show="loading" class="tdw-loading" type="spinner" color="#ff6600" />
  </div>
</template>

<script>
import { getNewsArt } from '@/api/api';
import { Toast, Card, NavBar, List, Row, Col } from 'vant';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      data: [],
      loading: false
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.loading = true
      getNewsArt({
        id: this.$route.params.id
      }).then(res => {
        this.loading = false
        console.log(res)
        if(res.data.errno === 0) {
          this.data = res.data.data
        }
      })
    },
    goback() {
      this.$router.go(-1);
    }
  },

  components: {

    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [NavBar.name]: NavBar,
    Toast
  }
};
</script>

<style lang="scss" scoped>
.goods_new {
  .art {
    background: #fff;
    padding-bottom: 12px;
    overflow: hidden;
    .title {
      font-size: 18px;
      text-align: center;
      font-weight: 700;
    }
    .subtitle {
      color: #ccc;
      text-align: center;
    }
    hr {
      border: none;
      background-color:#f2f2f2;
      height:1px;
    }
    .content {
      overflow: hidden;
      padding: 10px;
      /deep/ img {
        max-width: 100%;
        height: auto;
        display: block;
      }
    }
    .content >>> img{ display:block; max-width: 100% !important;width: 100% !important;}
  }
}
</style>